<!DOCTYPE html>
<html lang="zh">
<head>
 <meta charset="UTF-8" />
 <title>动态签名生成器</title>
 <!-- 导入 vue 插件 -->
 <script src="https://unpkg.com/vue@3.5.13/dist/vue.global.js"></script>
</head>
<body>
    <!-- 2. 准备容器 -->
 <div id="app">
    <!-- 6. 渲染数据 -->
   <h2>动态签名生成器</h2>
   <div>
     <label>昵称</label>
     <input type="text" v-model="userInfo.nick" />
   </div>
   <div>
     <label>账号</label>
     <input type="text" v-model="userInfo.count" />
   </div> 
   <div>
     <label>性别</label>
     <select v-model="userInfo.gender">
       <option value="0">男</option>
       <option value="1">女</option>
     </select>
   </div>
   <div>
     <label>幸运色</label>
     <input type="text" v-model="userInfo.color" />
   </div>
   <div>
     <label>幸运动物</label>
     <input type="text" v-model="userInfo.animal" />
   </div>
   <div>
     <h3>当前信息</h3>
     <p>昵称: {{ userInfo.nick }}</p>
     <p>账号: {{ userInfo.count }}</p>
     <p>性别: {{ userInfo.gender === 0 ? '男' : '女' }}</p>
   </div>
   <div>
     <h3>生成的签名</h3>
     <div>
       {{ fullSignature }}
     </div>
   </div>
   <div v-if="notification">
     {{ notification }}
   </div>
 </div>
 
 <script>
   // 3.解构 Vue 函数
   const { createApp, ref, computed, watch } = Vue;
   
   // 4.实例化 Vue
   createApp({
     setup() {
       const userInfo = ref({
         nick: '宝莲灯泡',   // 昵称
         count: "20245102090328",   // 账号
         gender: 0,   // 0：男，1：女
         color: '棕黄色',
         animal: '小狗'
       });
       
        const notification = ref('');

        const fullSignature = computed(() => {
        const salutation = userInfo.value.gender == 0 ? '先生' : '女士';
        
        return `大家好！我是${userInfo.value.nick}${salutation}，账号是${userInfo.value.count}。\n
我的幸运色是${userInfo.value.color}，幸运动物是${userInfo.value.animal}。\n
很高兴可以认识大家！`;
        });
       
       watch(() => userInfo.value.color,(newVal, oldVal) => {
           if (oldVal) {
            notification.value = `幸运色已从 ${oldVal} 变更为 ${newVal}`;
            
            setTimeout(() => {
               notification.value = '';
            }, 3000);
           }
         }
       );
       
       watch(() => [userInfo.value.nick, userInfo.value.animal],
         ([newNick, newAnimal], [oldNick, oldAnimal]) => {
           if (oldNick && oldAnimal) {
            notification.value = `${oldNick} 的幸运动物已从 ${oldAnimal} 变更为 ${newAnimal}`;
            setTimeout(() => {
                notification.value = '';
            }, 3000);
           }
         }
       );
       
       return {
         userInfo,
         fullSignature,
         notification
       };
     }
   }).mount('#app');  // 5. 挂载容器
 </script>
</body>
</html>
